<!--
 * @Author: your name
 * @Date: 2021-04-25 16:42:44
 * @LastEditTime: 2021-04-27 00:20:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jpowerWeb\src\views\guard\index.vue
-->
<template>
  <div class="wrapper">
    <JTable ref="JTable" :table-list="dataList" :config="tableConfig">
      <template slot="Actions" slot-scope="{row}">
        <el-button type="text" @click="handleActive(row,'more')">详情</el-button>
      </template>
      <template slot="activeBoxR">
        <el-button type="primary" @click="exportTable">导出</el-button>
      </template>
      <!-- <template slot="accountNumber" slot-scope="scope">
        <el-tag v-if="scope.row.accountNumber === -1">不限制</el-tag>
        <el-tag v-else>{{ scope.row.accountNumber }}</el-tag>
      </template>

      <template slot="expireTime" slot-scope="scope">
        <el-tag v-if="scope.row.expireTime">{{ scope.row.expireTime }}</el-tag>
        <el-tag v-else>不限制</el-tag>
      </template> -->
    </JTable>
  </div>
</template>

<script>
import JTable from '@/components/JTable'
import { guradList, exportTable } from '@/api/guard'
export default {
  components: { JTable },
  data() {
    const listQuery = {
      total: 0,
      page: 1,
      size: 10,
      handleFilter: this.fetchData
    }
    // const dialog = {
    //   dialogVisible: false,
    //   title: { created: '创建租户', edit: '修改租户', quota: '额度配置' },
    //   active: ''
    // }
    return {
      listQuery,
      dataList: [],
      listLoading: false,
      tableConfig: {
        listLoading: this.listLoading,
        pagination: listQuery,
        activeBox: {
          defaultBtn: false
        },
        thead: [
          // {
          //   type: 'selection'
          // },
          {
            type: 'index',
            label: '-',
            start: 1,
            width: 50
          },
          {
            prop: 'name',
            label: '服务名称'
          },
          {
            prop: 'body',
            label: 'body参数'
          },
          {
            prop: 'header',
            label: 'header参数',
            slot: true
          },
          {
            prop: 'isSuccess',
            label: '是否成功'
          },
          {
            prop: 'method',
            label: '请求方式'
          },
          {
            prop: 'path',
            label: '监控地址'
          },
          // {
          //   prop: 'respose',
          //   label: '响应数据'
          // },
          {
            prop: 'responseCode',
            label: '响应编码'
          },
          {
            prop: 'restfulResponse',
            label: '接口返回数据',
            slot: true
          },
          {
            prop: 'url',
            label: '接口地址',
            slot: true
          },
          {
            prop: '',
            label: 'Actions',
            type: 'actions',
            width: '150',
            align: 'center',
            slot: true
          }
        ],
        search: {
          // labelWidth: '80px',
          searchList: [
            'name',
            'path'
          ]
        }
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.fetchData()
  },
  mounted() {},
  destroyed() { },
  activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
  methods: {
    fetchData(argm = {}) {
      this.listLoading = true
      const { page: pageNum = 1, size: pageSize = 10, ...param } = argm
      const params = { pageNum, pageSize, ...param }

      guradList(params).then(res => {
        const { /* code, */ data: { records: list = [], total = 0 }} = res
        this.dataList = list
        this.listQuery.total = total
        this.listLoading = false
      })
    },
    exportTable() {
      // console.log(this.listQuery, this.tableConfig.search.searchList)
      const { page: pageNum = 1, size: pageSize = 10, handleFilter, total, ...param } = this.listQuery
      if (handleFilter) params = { total }
      let params = { pageNum, pageSize, ...param }
      exportTable(params).then(res => {
        console.log(res)
        const URL = window.URL || window.webkitURL
        const objectUrl = URL.createObjectURL(res)
        // window.open(objectUrl)
        const eleLink = document.createElement('a')
        eleLink.download = +(new Date()) + '.xlsx'
        eleLink.style.display = 'none'
        eleLink.href = objectUrl
        // 触发点击
        document.body.appendChild(eleLink)
        eleLink.click()
        // 然后移除
        document.body.removeChild(eleLink)
      })
    }
  }
}
</script>

<style lang='scss' scoped>
  //@import url(); 引入公共css类
  .wrapper{
    padding: 0px;
    margin: 0px;

  }
</style>
